<template>
  <a-modal :visible="visible" title="导出数据" :width="540" ok-text="批量导出" @cancel="handleCancel">
    <a-tree
      v-model:expandedKeys="expandedColumns"
      :field-names="{ children: 'children', title: 'title', key: 'dataIndex' }"
      v-model:checkedKeys="exportColumns"
      :selectable="false"
      checkable
      :tree-data="getTreeColumns"
    />
    <template #footer>
      <p class="exportTip"> 注: 默认导出筛选后的数据,如需导出全部数据请清空筛选条件 </p>
      <a-button @click="handleCancel"> 取消 </a-button>
      <a-button type="primary" @click="handleExport" :loading="exportLoading"> 批量导出 </a-button>
    </template>
  </a-modal>
</template>

<script>
  import { message } from 'ant-design-vue'
  import { computed, defineComponent, ref } from 'vue'

  export default defineComponent({
    name: 'BatchExport',
    props: {
      //分页信息
      pageData: {
        type: Object,
        default: () => {
          return {}
        }
      },
      //数据源ID
      pageId: {
        type: Number
      },
      //table列数据
      columns: {
        type: Array,
        default: () => []
      },
      //过滤条件
      filter: {
        type: Object,
        default: () => {
          return {}
        }
      },
      //数据源名称
      fileName: {
        type: String,
        default: () => {
          return ''
        }
      },
      downloadExcel: {
        type: Function
      },
      exportFormList: {
        type: Function
      }
    },
    setup(props) {
      const visible = ref(false)
      const exportColumns = ref([])
      const expandedColumns = ref([])
      const filterCondition = ref({})
      const exportLoading = ref(false)
      const init = filterConditions => {
        visible.value = true
        // 如果需要导出的字段为空, 取出可导出的所有字段
        if (!exportColumns.value.length) {
          exportColumns.value = getExportColumns(props.columns)
        }
        if (!expandedColumns.value.length) {
          expandedColumns.value = getExportColumns(props.columns)
        }
        filterCondition.value = filterConditions || {}
      }

      const noCloumn = ['sequenceNumber', 'operation']
      const getTreeColumns = computed(() => {
        return props.columns.filter(item => !noCloumn.includes(item.dataIndex))
      })
      const getExportColumns = data => {
        if (!data) {
          return []
        }
        let columns = []
        data.forEach(dataItem => {
          if (dataItem.children && dataItem.children.length) {
            columns = columns.concat(getExportColumns(dataItem.children))
          } else {
            !dataItem.disabled && !noCloumn.includes(dataItem.dataIndex) && columns.push(dataItem.dataIndex)
          }
        })
        return columns
      }
      /**
       * 新增参数columns
       * 从外部调用可以直接配置需要导出的字段
       */
      const handleExport = (columns = []) => {
        const columnList = columns.length ? columns : exportColumns.value
        if (!columnList.length) {
          message.info('请选择要导出的字段')
          return
        }
        const { current, pageSize } = props.pageData
        const data = {
          pageId: props.pageId,
          sort: {
            // 支持多排序
            id: 'DESC'
          },
          filterCondition: props.filter,
          columnList,
          pageNo: current,
          pageSize
        }
        exportLoading.value = true
        props
          .exportFormList(data)
          .then(response => {
            // // 关闭弹窗
            props.downloadExcel(response, props.fileName)
            visible.value = false
          })
          .finally(() => {
            exportLoading.value = false
          })
      }
      const handleCancel = () => {
        visible.value = false
      }
      return {
        visible,
        handleCancel,
        exportColumns,
        expandedColumns,
        getTreeColumns,
        handleExport,
        filterCondition,
        init,
        exportLoading
      }
    }
  })
</script>
